iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Modern Web

別再說我不會框架,網頁 Vue 起來!系列 第 21

頁面切換好夥伴- Vue Router [序]

  • 分享至 

  • xImage
  •  

前言

在過去,路由主要是 Server 負責,根據不同的路由去決定要渲染的頁面,回傳整個 HTML 回來,現在較多的架構是前後端分離前端負責頁面呈現資料;後端負責提供資料

只要 API 格式定義好,前端可以隨意選擇任何框架或無框架開發


路由?

一種對照表的概念,根據不同的url地址來顯示不同的頁面或內容的功能
如果每次換頁都需要刷新頁面,會影響使用者體驗,於是發展出 由前端管理路由

原本後端負責的路由改由前端處理,從頭到尾只有一個 index.html ,切換頁面時,不是整個頁面切換,而是發送 Request 取得 Response,將資料更新

在這樣只有一個 index.html 的情況下,瀏覽器大致有兩種路由模式可以使用:

hash 模式

  • URL 中的 # 符號,例如: https://www.example.com/#yoyoyo
  • 比較不美觀
  • 改變 # 後面的值,不會向 Server 發送請求,也不會刷新頁面
  • 觸發 hashchange 事件

history 模式

  • HTML 5 的 pushState()replaceState() (History API)
  • onpopstate 事件監聽

可以使用 history 物件中的 back() forward() go() 在歷史紀錄中移動,HTML5 增加的 history.pushState history.replaceState() 可以異動歷史紀錄

ex:

history.pushState(state [,title][,url]); // 歷史記錄中增加一條記錄

history.replaceState(state [,title][,url]); // 修改目前的歷史紀錄

安裝路由

vue add router
// 會詢問是否使用 history mode

產生以下檔案:

  • views 資料夾
    • 包含兩個檔案 About.vueHome.vue,代表頁面
  • router/index.js
    • 路由的設定

ex:

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router

<!-- App.vue -->
<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

使用 router-link 標籤,to 屬性後面接要造訪的頁面,router-view放置處代表要渲染元件的位置
ex:

// App.vue
<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-link to="/profile">Profile</router-link>
  </div>
  <router-view/>
</template>

未完待續...

參考

How to Use Vue Router: A Complete Tutorial

淺談新手在學習 SPA 時的常見問題:以 Router 為例


下篇預告

  • Vue Router 續

每日一句:
批評你的人,是你生命中的貴人 /images/emoticon/emoticon06.gif


上一篇
專案小幫手- Vue CLI
下一篇
頁面切換好夥伴- Vue Router [續]
系列文
別再說我不會框架,網頁 Vue 起來!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言